<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pangtang --Case--</title>
    <link rel="stylesheet" href="css/case.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/effect.js"></script>
    <!-- <script src="js/fadeIn.js"></script> -->
</head>

<body class="preload">
    <!-- Start of navigation section -->
    <nav class="clearfix">
        <a href="index.html"><img class="logo" src="img/logo.png" alt="logo"></a>

        <input type="checkbox" id="toggle">
        <label for="toggle" class="iconfont icon-toggle"></label>
        <i class="iconfont icon-icons- fr nav_wechat"></i>
        <ul class="navbar fr">
                <li><a href="index.html">
                        <h2>Home </h2><span>ホーム</span>
                    </a> </li>
                <li><a href="game.html">
                        <h2>Game</h2><span>ゲーム</span>
                    </a> </li>
                <li class="active"><a href="case.html">
                        <h2>Case</h2><span>ケース</span>
                    </a> </li>
                <li><a href="#">
                        <h2>About Us</h2><span>本社について</span>
                    </a> </li>
                    <li><a href="account.html">
                            <h2>Account</h2><span>アカウント</span>
                        </a> </li>
            </ul>

    </nav>
    <!-- End of navigation section -->

    <!-- Start of Banner -->
    <div class="banner">
        <img src="img/banner.png" alt="banner">
    </div>
    <!-- End of Banner -->


    <div class="content_frame">

        <!-- Start of game list-->
        <section class="section">
            <ul class="filter_list">
                <li><button class="active">Quick Sort</button></li>
                <li><button>Released Time</button></li>
                <li><button>Most Sold</button></li>
                <li><button>By Type</button></li>
            </ul>

            <!-- one row -->
            <div class="section_box clearfix fade-in-b">
                <div class="game fl">
                    <div class="game_description">
                        <h3>Game1</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game1.png" alt="game1">
                    </div>

                </div>
                <div class="game">
                    <div class="game_description">
                        <h3>Game2</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game2.png" alt="game2">
                    </div>

                </div>
                <div class="game fr">
                    <div class="game_description">
                        <h3>Game3</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game3.png" alt="game3">
                    </div>

                </div>
            </div>
            <!-- End of one row -->


            <!-- one row -->
            <div class="section_box clearfix  fade-in-b">
                <div class="game fl">
                    <div class="game_description">
                        <h3>Game4</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game4.png" alt="game4">
                    </div>

                </div>
                <div class="game">
                    <div class="game_description">
                        <h3>Game5</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game5.png" alt="game5">
                    </div>

                </div>
                <div class="game fr">
                    <div class="game_description">
                        <h3>Game3</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game6.png" alt="game6">
                    </div>

                </div>
            </div>
            <!-- End of one row -->

            <!-- one row -->
            <div class="section_box clearfix  fade-in-b">
                <div class="game fl">
                    <div class="game_description">
                        <h3>Game7</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game7.png" alt="game7">
                    </div>

                </div>
                <div class="game">
                    <div class="game_description">
                        <h3>Game8</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game8.png" alt="game8">
                    </div>

                </div>
                <div class="game fr">
                    <div class="game_description">
                        <h3>Game9</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>

                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game9.png" alt="game9">
                    </div>

                </div>
            </div>
            <!-- End of one row -->
            <div class="paging">
                <a href="#" id="prev"><i class="iconfont icon-arrow"></i></a>
                <ul>
                    <li><a href="#" class="active">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">······</a></li>
                    
                    <li><a href="#">12</a></li>
                </ul>
                <a href="#" id="next"><i class="iconfont icon-arrow1"></i></a>
            </div>


        </section>
        <!-- End of game list -->






    </div>



    <footer>

        <img src="img/footer_cane.png" alt="cane" class="footer_cane">
        <img src="img/bg_tower.png" alt="tower" class="footer_tower">
        <p>Copyright © 2014 Pangtang. All Rights Reserved. </p>
    </footer>


</body>

</html>